import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect  } from 'dva'
import { Button, Icon,Modal} from 'antd'
import Lists from './Lists'
import List from './List'
import styles from './List.less'
import Filter from './Filter'
import Filteradd from './Filteradd'
import Addrole from './addrole'
import Adduser from './adduser'
import Edituser from './edituser'
import Roleview from './roleview'
import IndexList from './IndexLst'
const confirm = Modal.confirm
function CBD ({ location, dispatch, cbd, loading }) {
  const {roleadd,roleTitle,editdatarole,IndexListStyle,allsecele,AmountNumber,AmountBolon,alluserlist,allrole, addroleId,StyleRole,StyleUser, list,rolelist, pagination, currentItem,userpagination,  modalVisible, modalType, isMotion,StyleEdituser,StyleRoleview } = cbd
  const { field, keyword } = location.query
  const listProps = {
    allsecele,
    AmountBolon,
    dataSource:rolelist,
    roleTitle:roleTitle,
    userpagination,
    loading,
    location,
    isMotion,
    onAdd () {
      dispatch({
        type: 'cbd/showUser',
      })
    },
    ondelete(data){
      dispatch({
        type: 'cbd/deletes',
        payload:{data,pagination}
      })
    },
    onPageChange (page) {
      dispatch({
        type:'cbd/Account',
        payload: page
      })
    },
    onDeleteItem (data) {
      dispatch({
        type: 'cbd/delete',
        payload: data
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'cbd/showEdit',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
  }
  const ListsProps ={
    location,
    loading,
    AmountNumber,
    rolelist:rolelist,
    dataSource:list,
    pagination,
    addroleId,
     isMotion,
    query(data){
      dispatch({
        type: 'cbd/query',
        payload:data
      })
    },
    Account(data){
      dispatch({
        type: 'cbd/Account',
        payload:{current:true}
      })
    },
    byrole(id,name){
      dispatch({
        type: 'cbd/byrole',
        payload:{
          id:id,
          name:name
        }
      })
    },
    onClose (data) {
      dispatch({
       type: 'cbd/showRole',
       payload:{
          roleTitle:'edit',
          data:data
        },
      })
    },
    onCopy (data) {
      dispatch({
       type: 'cbd/showRole',
       payload:{
          roleTitle:'copy',
          data:data
        },
      })
    },
    onDelete(data){
      dispatch({
        type: 'cbd/DeleteRole',
        payload:{data,pagination}
      })
    },
    onView(data){
      dispatch({
        type: 'cbd/viwePer',
        payload:data
      })
    },
    onAdd () {
      dispatch({
        type: 'cbd/showUser',
      })
    },
    onPageChange (page) {
      dispatch({
        type:'cbd/Account',
        payload: page
      })
    }
  }

  const IndexListPrors ={
    AmountNumber,
    location,
    loading,
    dataSource:list,
    pagination,
    isMotion,
    onAdd () {
      dispatch({
        type: 'cbd/showUser',
      })
    },
    onPageChange (page) {
      dispatch({
        type:'cbd/Account',
        payload: page
      })
    },
    onEditItem(data){
      console.log("Dataaa",data)
      dispatch({
        type: 'cbd/hideIndexList',
        payload:{
          roleId:data.id,
          name:data.name
        }
      })
    },
    onClose (data) {
        dispatch({
        type: 'cbd/showRole',
        payload:{
            roleTitle:'edit',
            data:data
          },
        })
    },
    onDelete(data){
      dispatch({
        type: 'cbd/DeleteRole',
        payload:{data,pagination}
      })
    },
  }
  const filterProps = {
    field,
    keyword,
    isMotion,
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/cbd',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/cbd',
      }))
    },
    onAdd () {
      dispatch({
        type: 'cbd/showUser',
      })
    },
    switchIsMotion () {
      dispatch({ type: 'cbd/switchIsMotion' })
    },
  }
  const addrolePropsd = {
    roleTitle:roleTitle,
    editdatarole,
    alluserlist,
    onAdd (data) {
      dispatch({
        type: 'cbd/create',
        payload: data,
      })
    },
    update (data) {
      dispatch({
        type: 'cbd/update',
        payload: data,
      })
    },
    onClose (data) {
      if(localStorage.getItem("editNot") == 'true'){
        dispatch({
          type: 'cbd/hideRole',
          payload: data,
        })
      }else{
        confirm({
          title: '温馨提示',
          content: '你填写的内容还没保存，确认退出会清空你填写的内容，确认退出编辑吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            localStorage.setItem("editNot",'true')
            dispatch({
              type: 'cbd/hideRole',
              payload: data,
            })
          },
        });
      }
    },
  }
  
  const addUserPropsd = {
    allsecele,
    modalType,
    currentItem,
    allrole:allrole,
    roleTitle:roleTitle,
    addroleId,
    onAdd (data) {
      console.log("data==",data)
      dispatch({
        type: 'cbd/addUser',
        payload: {data, pagination},
      })
    },
    onClose (data) {
      if(localStorage.getItem("editNot") == 'true'){
        dispatch({
          type: 'cbd/hideRole',
          payload: data,
        })
      }else{
        confirm({
          title: '温馨提示',
          content: '你填写的内容还没保存，确认退出会清空你填写的内容，确认退出编辑吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            localStorage.setItem("editNot",'true')
            dispatch({
              type: 'cbd/hideRole',
              payload: data,
            })
          },
        });
      }
    },
    onEditUser(data){
      dispatch({
        type: 'cbd/EditUser',
        payload: data,
      })
    }
  }
 
  const onRoleadd =() =>{
    console.log("editNot===",localStorage.getItem("editNot"))
    if(localStorage.getItem("editNot") == 'true'){
      dispatch({
        type: 'cbd/showRole',
        payload:{
          roleTitle:'add',
          data:{id:0}
        }
      })
    }else{
      confirm({
          title: '温馨提示',
          content: '你填写的内容还没保存，确认退出会清空你填写的内容，确认退出编辑吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            localStorage.setItem("editNot",'true')
            dispatch({
              type: 'cbd/showRole',
              payload:{
                roleTitle:'add',
                data:{id:0}
              }
            })
          },
        });
    }
  }
  const onRoleHide =() =>{
    dispatch({
     type: 'cbd/hideRole',
    })
  }



 const StyleList ={
    display:roleadd?'block':'none'
  }
  const StyleRoles ={
    display:StyleRole?'block':'none'
  }
  const StyleUsers ={
    display:StyleUser?'block':'none'
  }
 const StyleEditusers ={
    display:StyleEdituser?'block':'none'
  }
  const StyleRoleviews ={
    display:StyleRoleview?'block':'none'
  }
  const IndexListDisTop ={
    display:IndexListStyle?"block":'none'
  }
  const IndexListDisBto = {
    display:IndexListStyle?"none":'block'
  }
  const Addroleres = () =><Addrole {...addrolePropsd} />
  const Addusers = ()=> <Adduser {...addUserPropsd}/>
  const Editusers = ()=> <Edituser {...addUserPropsd}/>
  const ListL =()=> <List {...listProps} />
  const Roleviews =()=> <Roleview {...addrolePropsd}/>
  const IndexLists =()=> <IndexList {...IndexListPrors}/>

  return (
    <div className={styles.centerbox}>
      <div style={IndexListDisTop}>
        <IndexLists />
      </div>
      <div style={IndexListDisBto}>
        <div className={styles.userList}>
          <div className={styles.title}>
            <div className={styles.left}>全部角色<Icon style={{color:'#666',fontSize:14}} type="down"/></div>
            <div className={styles.right}><Button className={styles.btnstyle} type="primary" icon="plus" onClick={onRoleadd}>新增角色</Button></div>
          </div>
          <Lists {...ListsProps}/>
        </div>
        <div className={styles.userInfo}>
          <div style={StyleList}>
            <ListL />
          </div>
          <div style={StyleRoles}>
            <Addroleres/>
          </div>
          <div style={StyleUsers}>
            <Addusers/>
          </div>
          <div style={StyleEditusers}>
            <Editusers/>
          </div>
          <div style={StyleRoleviews}>
            <Roleviews/>
          </div>
        </div>
      </div>
    </div>
  )
}

CBD.propTypes = {
  cbd: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.bool,
}

export default connect(({ cbd, loading }) => ({ cbd, loading: loading.models.cbd }))(CBD)
